<template>
  <div id="components-layout-demo-basic" style="width: 100%; height: 100%; position: relative">
    <img src="~@/assets/rank_bg.png" style="width: 100%; height: 100%; position: absolute; opacity: 0.3" />
    <h1>成绩榜</h1>
<!--    <h2>个人总榜</h2>-->
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
      :scroll="{ y: tableHeight }"
      style="width: 90%; margin: 0 auto; opacity: 0.8"
    >
    </a-table>
  </div>
</template>

<script>
import store from '@/store/'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'QueryResult',
  data() {
    return {
      tableHeight: 400,
      matchId: '',
      form: this.$form.createForm(this, { name: 'coordinated' }),

      data: [],
      data_origin: [],
      columns: [
        {
          title: '名次',
          dataIndex: 'key',
          width: '5%',
          align: 'center',
        },
        {
          title: '姓名',
          dataIndex: 'player',
          width: '15%',
          align: 'center',
        },
        {
          title: '号码牌',
          dataIndex: 'sysOrgCode',
          width: '14%',
          align: 'center',
        },
        {
          title: '总成绩',
          dataIndex: 'score',
          width: '14%',
          align: 'center',
        },/*
        {
          title: '净成绩',
          dataIndex: 'scorecj',
          width: '14%',
          align: 'center',
        },*/
        {
          title: '圈数',
          dataIndex: 'totalring',
          width: '5%',
          align: 'center',
        },
        // {
        //   title: '用时',
        //   dataIndex: 'time',
        //   width: '10%',
        //   align: 'center',
        // },
      ],
    }
  },
  created() {
    this.tableHeight = window.innerHeight * 0.8
    this.matchId = this.$route.params.matchId
    this.groupId = this.$route.params.groupId
  },
  mounted() {
    // var orightHeight = dom$.find(".BA_DEZJ_Table .table_body").height();
    // var scrollHeight = dom$.find(".BA_DEZJ_Table .table_body table").height();
    // if (orightHeight < scrollHeight) {
    //     var play = function () {
    //         clearInterval(timer);
    //         timer = setInterval(function () {
    //             body.scrollTop++;
    //             if (body.scrollTop >= body.scrollHeight / 2) {
    //                 body.scrollTop = 0;
    //             }
    //         }, scrollSpeed);
    //     };
    //     var body = dom$.find(".BA_DEZJ_Table .table_body")[0];
    //     var tableContent = dom$.find(".BA_DEZJ_Table .table_body table tbody")[0];
    //     var timer = null;
    //     body.scrollTop = 0;
    //     if (showScrollY === false) {
    //         tableContent.innerHTML += tableContent.innerHTML;
    //     }
    //     setTimeout(play, 10);
    //     $(body).mouseover(function () {
    //         clearInterval(timer)
    //     });
    //     $(body).mouseout(function () {
    //         play();
    //     });
    this.loadData();
    let that = this
    setTimeout(() => {
      this.timer = window.setInterval(() => {
        that.loadData()
      }, 5000)
    }, 5000)
  },
  methods: {
    loadData(){
      let that = this
      this.$http.get('/matchwhite/ranklist?matchId=' + this.matchId + '&groupId=' + this.groupId).then((res) => {
        if (res.result.length > 0) {
          this.data = res.result.filter((o) => {
            return o.score
          })
          if (this.data.length > 0) {
            this.data.forEach((item, index) => {
              item['key'] = index + 1
            })
          }
        }
        //this.data_origin = this.data
        //console.log('赛事人员列表', this.data)
      })
    }
  },
}
</script>

<style lang="less" scoped>
#components-layout-demo-basic {
  background-color: #04113d;
}
#components-layout-demo-basic h1 {
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  font-family: Microsoft YaHei;
  color: #fff;
  letter-spacing: 10px;
}
#components-layout-demo-basic h2 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  font-family: Microsoft YaHei;
  color: #ffb129;
}
#components-layout-demo-basic th td {
  background: rgba(255, 255, 255, 0.3);
}

/deep/ .ant-table-thead > tr > th {
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #007ddb;
  background: rgba(0, 125, 219, 0.3);
  color: #fff;
}
/deep/.ant-table-header {
  background: #031848 !important;
  overflow: hidden !important;
}
/deep/.ant-table-body {
  background: #031848 !important;
}

/deep/ .ant-table-bordered .ant-table-header > table,
.ant-table-bordered .ant-table-body > table,
.ant-table-bordered .ant-table-fixed-left table,
.ant-table-bordered .ant-table-fixed-right table {
  border: 1px solid #007ddb;
  border-bottom: 0;
}
/deep/ .ant-table-bordered .ant-table-tbody > tr > td {
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #007ddb;
  color: #fff;
}

/deep/ .ant-table-bordered .ant-table-body > table {
  border: 1px solid #007ddb;
}

/deep/ ::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
/deep/ .ant-table-bordered .ant-table-body > table tbody tr:hover td {
  background: rgba(80, 118, 255, 0.2) !important;
  cursor: pointer;
}
/deep/ .ant-table-bordered .ant-table-body > table tbody tr:nth-child(2n) td {
  background: rgba(80, 118, 255, 0.2) !important;
  cursor: pointer;
}
/deep/ .ant-table-bordered .ant-table-body > table tbody tr:nth-child(1) td {
  background: #ffb129 !important;
  cursor: pointer;
}
/deep/ .ant-table-bordered .ant-table-body > table tbody tr:nth-child(2) td {
  background: #b7b7bc !important;
  cursor: pointer;
}
/deep/ .ant-table-bordered .ant-table-body > table tbody tr:nth-child(3) td {
  background: #cd7f32 !important;
  cursor: pointer;
}
</style>